<html>
	<head>
		<title>
			..:test localStorage:..
		</title>
		<script type="text/javascript" src='../src/jquery.js'>
		</script>
		<style type="text/css">
			div { width: 300px; height: 310px; background-image: url(bg.jpg)}
		</style>
	</head>
	<body>
		<img src='2.jpg' />
		<img src='1.jpg' />
		<div></div>
<script type="text/javascript">
;
(function($) {
	$.fn.imageCache = function(options) {
		this.config = {
			base64ImageEncoderPath: 'ha.php?id=',
			canvasEncoder: true // Experimental :D
		};
		$.extend(this.config, options);

		// Check for canvas support
		this.config.canvasEncoder = typeof HTMLCanvasElement != undefined ? this.config.canvasEncoder : false;

		var self = this;

		var getBase64Image = function(img) {
			try {
				var canvas = document.createElement('canvas');
				canvas.width = img.width;
				canvas.height = img.height;

				var ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0);

				var imgType = img.src.match(/\.(jpg|jpeg|png)$/i);
				if (imgType && imgType.length) {
					imgType = imgType[1].toLowerCase() == 'jpg' ? 'jpeg' : imgType[1].toLowerCase();
				}
				else {
					throw 'Invalid image type for canvas encoder: ' + img.src;
				}
				return canvas.toDataURL('image/' + imgType);
			}
			catch (e) {
				console && console.log(e);
				return 'error';
			}
		}

		$(document).ready(function() {
			$('html').find("*:not(script)").each(function() {
				var url = "";
				if ($(this).css("background-image") != "none") {
					url = $(this).css("background-image").match('http.+[^)]')[0];
				}
				else if (typeof($(this).attr("src")) != "undefined") {
					url = $(this).attr("src");
				}
				if (url.length > 0) {
					if ( !!url.indexOf('url')) { //if ture image tag exist
						var $img = $(this);
						var src = url;//$img.attr('src') || $img.attr('data-src');
						if (localStorage) {
							var localSrc = localStorage[src];
							if (localSrc && /^data:image/.test(localSrc)) {
								$img.attr('src', localSrc);
							}
							else {
								$img.attr('src', src);
								if (localStorage[src] !== 'pending') {
									localStorage[src] = 'pending';
									if (self.config.canvasEncoder) {
										$(this).load(function() {
											localStorage[src] = getBase64Image(this);
										});
									}
									else {
										$.ajax({
											url: self.config.base64ImageEncoderPath + src,
											success: function(data) {
												localStorage[src] = data;
											},
											error: function() {
												localStorage[src] = 'error';
											}
										});
									}
								}
							}
						}
					}
					else {
						var $bgimg = $(this);
						var src = url;//$bgimg.css('background-image').match('http.+[^)]')[0];
						if (localStorage) {
							var localSrc = localStorage[src];
							if (localSrc && /^data:image/.test(localSrc)) {
								$bgimg.attr('style', 'background-image: url(' + localSrc + ')');
							}
							else {
								$bgimg.attr('style', 'background-image: url(' + src + ')');
								if (localStorage[src] !== 'pending') {
									localStorage[src] = 'pending';
									if (self.config.canvasEncoder) {
										$('<img src=' + src + '>').load(function() {
											localStorage[src] = getBase64Image(this);
										});
									}
									else {
										$.ajax({
											url: self.config.base64ImageEncoderPath + src,
											success: function(data) {
												localStorage[src] = data;
											},
											error: function() {
												localStorage[src] = 'error';
											}
										});
									}
								}
							}
						}
					}
				}
			});
		});
		return this;
	}
})(jQuery);
$('img').imageCache();
</script>
	</body>

</html>